<template>
  <el-form :model="appData" ref="queryApp" class="demo-form-inline" size="mini">
    <el-row :gutter=20>
      <el-col :span=4>
        <el-form-item label="应用名称">
          <el-input placeholder="请输入" v-model="appData.appName" type="text"/>
        </el-form-item>
      </el-col>
      <el-col :span=4>
        <el-form-item label="应用key">
          <el-input placeholder="请输入" v-model="appData.appKey" type="text"/>
        </el-form-item>
      </el-col>
      <el-col :span=4>
        <el-form-item>
          <el-button round type="primary" @click="getAppList">查询</el-button>
          <el-button round @click="resetForm('queryApp')">重置</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <el-row>
    <el-button type="primary" round @click="showAppDialog()" size="medium">添加应用</el-button>
  </el-row>
  <AppDialog ref="appDialog"/>
  <UserRelationDialog ref="relationDialog"/>

  <el-table :data="appList" :key="appKey" style="width: 100%">
    <el-table-column fixed label="应用名" prop="appName" width="80">
      <template #default="scope">
        {{ scope.row.appName }}
      </template>
    </el-table-column>
    <el-table-column label="应用key" prop="appKey" width="120">
      <template #default="scope">
        {{ scope.row.appKey }}
      </template>
    </el-table-column>
    <el-table-column label="应用密钥" prop="appSecret" width="120">
      <template #default="scope">
        {{ scope.row.appSecret }}
      </template>
    </el-table-column>
    <el-table-column label="回调地址" prop="redirectUrl" width="200">
      <template #default="scope">
        {{ scope.row.redirectUrl }}
      </template>
    </el-table-column>
    <el-table-column label="创建人" width="120" prop="createdBy">
      <template #default="scope">
        {{ scope.row.createdBy }}
      </template>
    </el-table-column>
    <el-table-column label="备注" width="120" prop="description">
      <template #default="scope">
        {{ scope.row.description }}
      </template>
    </el-table-column>
    <el-table-column label="创建时间" width="200" prop="createdTIme">
      <template #default="scope">
        {{ scope.row.createdTime }}
      </template>
    </el-table-column>
    <el-table-column label="更新人" width="120" prop="updatedBy">
      <template #default="scope">
        {{ scope.row.updatedBy }}
      </template>
    </el-table-column>
    <el-table-column label="更新时间" width="200" prop="updatedTime">
      <template #default="scope">
        {{ scope.row.updatedTime }}
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="180">
      <template #default="scope">
        <el-button-group>
          <el-button type="primary" icon="el-icon-edit" @click="showAppDialog(scope.row)"></el-button>
          <el-button type="primary" icon="el-icon-user" @click="showRelationDialog(scope.row)"></el-button>
        </el-button-group>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      :hide-on-single-page="pageData.hidden"
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="pageData.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageData.size"
      :total="pageData.total"
      layout="total, sizes, prev, pager, next, jumper"
  >

  </el-pagination>
</template>
<script>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import AppDialog from "../components/AppDialog.vue";
import UserRelationDialog from "../components/UserRelationDialog.vue";

export default {
  components: {
    AppDialog, UserRelationDialog
  },
  setup() {
    const {proxy} = getCurrentInstance()
    const appData = reactive({
      appKey: ref(),
      appName: ref(),
      redirectUrl: ref()
    })

    const pageData = reactive({
      page: ref(1),
      size: ref(10),
      total: ref(0),
      hidden: ref(true)
    })

    let appList = []

    const appKey = ref()
    const getAppList = () => {
      proxy.$service.getAppList({
        appKey: proxy.appData.appKey,
        appName: proxy.appData.appName,
        current: proxy.pageData.page,
        size: proxy.pageData.size
      }).then(result => {
        let json = result.res.data
        proxy.pageData.total = json.total
        proxy.appList = json.records
        proxy.appKey = Math.random()
      })
    }

    onMounted(() => {
      getAppList();
    })

    const resetForm = (formName) => {
      proxy.$refs[formName].resetFields()
    }

    const showAppDialog = (params) => {
      proxy.$refs.appDialog.setAppData(params)
    }
    const showRelationDialog = (param) => {
      proxy.$refs.relationDialog.setDialogType(reactive({
        id:param.id,
        type:2
      }))
    }

    const sizeChange = (val) => {
      {
        proxy.pageData.size = val
        getAppList()
      }
    }
    const currentChange = (val) => {
      proxy.pageData.page = val;
      getAppList()
    }

    return {
      appData,
      getAppList,
      resetForm,
      showAppDialog,
      pageData,
      sizeChange,
      currentChange,
      appList,
      appKey,
      showRelationDialog
    }
  }
}
</script>

<style>

</style>